import 'package:flutter/material.dart';
import 'package:flutter_saixiaoli/pages/activity/activeDetail/shareSheet.dart';
import 'package:flutter_saixiaoli/pages/activity/activeDetail/swiperIndicator.dart';
import 'package:flutter_saixiaoli/pages/activity/activeDetail/tabs.dart';
import 'package:flutter_saixiaoli/routes.dart';
import 'package:flutter_saixiaoli/utils/bottomSheet.dart';

import 'package:flutter_swiper/flutter_swiper.dart';

import 'bottomWidget.dart';

class ActiveDetail extends StatefulWidget {
  @override
  State<ActiveDetail> createState() => _ActiveDetailState();
}

class _ActiveDetailState extends State<ActiveDetail>
    with SingleTickerProviderStateMixin {
  String name = '666';
  TabController tabc;
  List tabs = [
    {'name': '新手入门'},
    {'name': '亲子夏令营'},
    {'name': '自驾游'}
  ];
  bool textShow = true;
  void initState() {
    super.initState();
    tabc = new TabController(length: tabs.length, vsync: this);
    // tabc.addListener(() {
    //   setState(() {
    //     tabIndex = tabc.index;
    //   });
    // });
  }

  @override
  Widget build(BuildContext context) {
    List swiperList = [
      Container(
        width: MediaQuery.of(context).size.width,
        color: Colors.red,
      ),
      Container(
        width: MediaQuery.of(context).size.width,
        color: Colors.yellow,
      ),
      Container(
        width: MediaQuery.of(context).size.width,
        color: Colors.green,
      ),
    ];

    //排期的item
    itemWidget() {
      return Container(
        width: 100,
        height: 80,
        margin: EdgeInsets.only(right: 10),
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Color.fromRGBO(221, 221, 221, 1)),
            borderRadius: BorderRadius.circular(5)),
        child: Column(
          children: [
            Container(
              color: Color.fromRGBO(249, 249, 249, 1),
              width: MediaQuery.of(context).size.width,
              alignment: Alignment.center,
              child: Text(
                '11-12（星期四)',
                style: TextStyle(fontSize: 11),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 9),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Container(
                    child: Text(
                      '￥',
                      style: TextStyle(
                          fontSize: 11,
                          color: Color.fromRGBO(191, 55, 54, 1),
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                  Container(
                    child: Text(
                      '1999.00',
                      style: TextStyle(
                          fontSize: 16,
                          height: 1,
                          color: Color.fromRGBO(191, 55, 54, 1),
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 7),
                    child: Text(
                      '起',
                      style: TextStyle(
                          fontSize: 9, color: Color.fromRGBO(102, 102, 102, 1)),
                    ),
                  )
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 9),
              child: Text(
                '已成行 I 余位49',
                style: TextStyle(
                    fontSize: 10, color: Color.fromRGBO(67, 112, 246, 1)),
              ),
            )
          ],
        ),
      );
    }

    //底部标题弹窗
    bottomSheetTitleWidget() {
      return Container(
        alignment: Alignment.center,
        child: Text(
          '选择集合地',
          style: TextStyle(fontSize: 16),
        ),
        padding: EdgeInsets.symmetric(vertical: 30),
      );
    }

    //分享弹窗
    shareSheetWidget(double height) {
      return
        Container(
          //margin: EdgeInsets.only(bottom: 55),
          padding: EdgeInsets.symmetric(vertical: 12),

          height: height,
          color: Colors.white,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Container(

                child: Column(
                  children: [
                    Container(
                      child: Image.asset(
                        'images/active/wx.png',
                        width: 45,
                        height: 45,
                      ),
                    ),
                    Container(
                        child: Text(
                          '微信',
                          style: TextStyle(fontSize: 12),
                        ),
                        margin: EdgeInsets.only(top: 10))
                  ],
                ),
              ),
              Container(
                child: Column(
                  children: [
                    Container(
                      child: Image.asset(
                        'images/active/pyq.png',
                        width: 45,
                        height: 45,
                      ),
                    ),
                    Container(
                        child: Text(
                          '分享朋友圈',
                          style: TextStyle(fontSize: 12),
                        ),
                        margin: EdgeInsets.only(top: 10))
                  ],
                ),
              ),
              Container(
                child: Column(
                  children: [
                    Container(
                      child: Image.asset(
                        'images/active/hb.png',
                        width: 45,
                        height: 45,
                      ),
                    ),
                    Container(
                        child: Text(
                          '生成海报',
                          style: TextStyle(fontSize: 12),
                        ),
                        margin: EdgeInsets.only(top: 10))
                  ],
                ),
              ),
            ],
          ));
    }

    return Scaffold(
        appBar: AppBar(
          title: Text('活动详情'),
          elevation: 0,
        ),
        body: Flex(
          direction: Axis.vertical,
          children: [
            Expanded(
                child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    height: 180,
                    child: Swiper(
                      itemCount: swiperList.length,
                      itemBuilder: (context, index) {
                        return Container(
                          child: swiperList[index],
                        );
                      },
                      pagination: SwiperPagination(
                        alignment: Alignment.bottomRight,
                        builder:
                            SwiperCustomPagination(builder: (context, config) {
                          return SwiperIndicator.indicator(
                              current: config.activeIndex + 1,
                              length: swiperList.length,textShow: this.textShow);
                        }),
                      ),
                    ),
                  ),
                  Container(
                      padding: EdgeInsets.all(12),
                      child: Column(
                        children: [
                          Container(
                            child: RichText(
                              text: TextSpan(children: [
                                WidgetSpan(
                                  child: Container(
                                    width: 55,
                                    height: 18,
                                    margin: EdgeInsets.only(right: 10),
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(2),
                                        gradient: LinearGradient(colors: [
                                          Color.fromRGBO(255, 229, 123, 1),
                                          Color.fromRGBO(255, 181, 39, 1)
                                        ])),
                                    child: Text(
                                      '热门推荐',
                                      style: TextStyle(
                                          fontSize: 11,
                                          fontWeight: FontWeight.bold),
                                    ),
                                  ),
                                ),
                                TextSpan(
                                    text:
                                        '徽杭古道4日游 ，驴友徒步+景点路线 徽杭古道4 日游 ，驴友徒步+景点路线',
                                    style: TextStyle(
                                        color: Colors.black,
                                        fontWeight: FontWeight.bold))
                              ]),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 9),
                            child: Row(
                              children: [
                                Container(
                                  width: 60,
                                  height: 19,
                                  margin: EdgeInsets.only(right: 10),
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                      border: Border.all(
                                          color:
                                              Color.fromRGBO(48, 112, 255, 1)),
                                      borderRadius: BorderRadius.circular(2.5)),
                                  child: Text(
                                    '快乐出行',
                                    style: TextStyle(
                                        fontSize: 11,
                                        color: Color.fromRGBO(48, 112, 255, 1)),
                                  ),
                                ),
                                Container(
                                  width: 60,
                                  height: 19,
                                  margin: EdgeInsets.only(right: 10),
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                      border: Border.all(
                                          color:
                                              Color.fromRGBO(48, 112, 255, 1)),
                                      borderRadius: BorderRadius.circular(2.5)),
                                  child: Text(
                                    '旅游大巴',
                                    style: TextStyle(
                                        fontSize: 11,
                                        color: Color.fromRGBO(48, 112, 255, 1)),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 10),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Container(
                                  child: Row(
                                    children: [
                                      Container(
                                        child: Text(
                                          '￥',
                                          style: TextStyle(
                                              fontSize: 11,
                                              color: Color.fromRGBO(
                                                  191, 55, 54, 1)),
                                        ),
                                      ),
                                      Container(
                                        child: Text(
                                          '1280.00~',
                                          style: TextStyle(
                                              fontSize: 16,
                                              color: Color.fromRGBO(
                                                  191, 55, 54, 1)),
                                        ),
                                      ),
                                      Container(
                                          child: Text(
                                        '￥',
                                        style: TextStyle(
                                            fontSize: 11,
                                            color:
                                                Color.fromRGBO(191, 55, 54, 1)),
                                      )),
                                      Container(
                                        child: Text(
                                          '1880.00',
                                          style: TextStyle(
                                              fontSize: 16,
                                              color: Color.fromRGBO(
                                                  191, 55, 54, 1)),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                                Container(
                                  child: Row(
                                    children: [
                                      Container(
                                        child: Icon(
                                          Icons.remove_red_eye,
                                          size: 17,
                                          color:
                                              Color.fromRGBO(136, 136, 136, 1),
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(left: 5),
                                        child: Text(
                                          '255',
                                          style: TextStyle(
                                            color: Color.fromRGBO(
                                                136, 136, 136, 1),
                                          ),
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(left: 10),
                                        child: Icon(
                                          Icons.share_sharp,
                                          size: 17,
                                          color:
                                              Color.fromRGBO(136, 136, 136, 1),
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(left: 5),
                                        child: Text(
                                          '255',
                                          style: TextStyle(
                                            color: Color.fromRGBO(
                                                136, 136, 136, 1),
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          )
                        ],
                      )),
                  Container(
                    height: 8,
                    color: Color.fromRGBO(249, 249, 249, 1),
                  ),
                  Container(
                    padding: EdgeInsets.all(12),
                    child: Column(
                      children: [
                        GestureDetector(
                          onTap: () {
                            print(88888);
                            bottomSheet().showCustomModalBottomSheet(context,
                                title: bottomSheetTitleWidget(),
                                options: BottomWidget(
                              callBack: (t) {
                                setState(() {
                                  this.name = t;
                                });
                              },
                            ));
                          },
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: [
                                  Container(
                                    child: Text(
                                      '集合地',
                                      style: TextStyle(
                                          color:
                                              Color.fromRGBO(102, 102, 102, 1)),
                                    ),
                                  ),
                                  Container(
                                    child: Text('$name'),
                                    margin: EdgeInsets.only(left: 20),
                                  )
                                ],
                              ),
                              Row(
                                children: [
                                  Container(
                                    alignment: Alignment.center,
                                    child: Text(
                                      '2',
                                      style: TextStyle(
                                          fontSize: 12,
                                          color:
                                              Color.fromRGBO(191, 55, 54, 1)),
                                    ),
                                    width: 20,
                                    height: 17,
                                    color: Color.fromRGBO(248, 235, 235, 1),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(left: 10),
                                    child: Icon(
                                      Icons.arrow_forward_ios_sharp,
                                      size: 10,
                                    ),
                                  )
                                ],
                              )
                            ],
                          ),
                        ),
                        Divider(
                          height: 30,
                          thickness: 0.5,
                          color: Color.fromRGBO(238, 238, 238, 1),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              children: [
                                Container(
                                  child: Text(
                                    '目的地',
                                    style: TextStyle(
                                        color:
                                            Color.fromRGBO(102, 102, 102, 1)),
                                  ),
                                ),
                                Container(
                                  child: Text('安徽省黄山市江南第一关'),
                                  margin: EdgeInsets.only(left: 20),
                                )
                              ],
                            ),
                            Container(
                              margin: EdgeInsets.only(left: 10),
                              child: Icon(
                                Icons.place,
                                size: 10,
                                color: Color.fromRGBO(136, 136, 136, 1),
                              ),
                            )
                          ],
                        )
                      ],
                    ),
                  ),
                  Container(
                    height: 8,
                    color: Color.fromRGBO(249, 249, 249, 1),
                  ),
                  Container(
                    padding: EdgeInsets.all(12),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              children: [
                                Container(
                                  width: 3,
                                  height: 17,
                                  color: Color.fromRGBO(191, 55, 54, 1),
                                ),
                                Container(
                                  margin: EdgeInsets.only(left: 10),
                                  child: Text(
                                    '排期',
                                    style: TextStyle(
                                        color: Color.fromRGBO(102, 102, 102, 1),
                                        height: 1),
                                  ),
                                ),
                              ],
                            ),
                            Container(
                              child: Icon(
                                Icons.arrow_forward_ios_sharp,
                                size: 10,
                              ),
                            )
                          ],
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 17),
                          child: SingleChildScrollView(
                            scrollDirection: Axis.horizontal,
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                itemWidget(),
                                itemWidget(),
                                itemWidget(),
                                itemWidget()
                              ],
                            ),
                          ),
                        ),
                        Divider(
                          height: 30,
                          thickness: 1,
                          color: Color.fromRGBO(238, 238, 238, 1),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Container(
                              child: Stack(
                                fit: StackFit.loose,
                                textDirection: TextDirection.ltr,
                                alignment: Alignment.centerLeft,
                                children: [
                                  Container(
                                    width: 30,
                                    height: 30,
                                    decoration: BoxDecoration(
                                        color: Colors.red,
                                        borderRadius:
                                            BorderRadius.circular(15)),
                                  ),
                                  Container(
                                    width: 30,
                                    height: 30,
                                    margin: EdgeInsets.only(left: 10),
                                    decoration: BoxDecoration(
                                        color: Colors.yellow,
                                        borderRadius:
                                            BorderRadius.circular(15)),
                                  )
                                ],
                              ),
                            ),
                            Row(
                              children: [
                                Container(
                                  child: Text(
                                    '已报名16人',
                                    style: TextStyle(fontSize: 13),
                                  ),
                                ),
                                Container(
                                  child: Icon(
                                    Icons.arrow_forward_ios_sharp,
                                    size: 10,
                                  ),
                                  margin: EdgeInsets.only(left: 10),
                                )
                              ],
                            )
                          ],
                        ),
                        Divider(
                          height: 30,
                          thickness: 1,
                          color: Color.fromRGBO(238, 238, 238, 1),
                        ),
                        Container(
                          margin: EdgeInsets.only(bottom: 10),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: [
                                  Container(
                                    child: Text('领   队'),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(left: 10),
                                    width: 30,
                                    height: 30,
                                    decoration: BoxDecoration(
                                        color: Colors.redAccent,
                                        borderRadius:
                                            BorderRadius.circular(15)),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(left: 5),
                                    child: Text('哎呀呀'),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(left: 5),
                                    width: 60,
                                    height: 20,
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        color:
                                            Color.fromRGBO(255, 243, 234, 1)),
                                    child: Text(
                                      '带队八年',
                                      style: TextStyle(
                                          color:
                                              Color.fromRGBO(255, 136, 49, 1),
                                          fontSize: 12),
                                    ),
                                  ),
                                ],
                              ),
                              Container(
                                child: Icon(Icons.mobile_friendly_outlined),
                              )
                            ],
                          ),
                        ),
                        Container(
                          height: 8,
                          color: Color.fromRGBO(249, 249, 249, 1),
                        ),
                      ],
                    ),
                  ),
                  //tabs
                  Tabs(tabc: tabc, tabs: tabs),
                ],
              ),
            )),
            Container(
              decoration: BoxDecoration(boxShadow: [
                BoxShadow(
                    color: Color.fromRGBO(187, 187, 187, 0.4),
                    offset: Offset(0.0, 5.0), //阴影xy轴偏移量
                    blurRadius: 15.0, //阴影模糊程度
                    spreadRadius: 1.0)
              ], color: Colors.white),
              height: 55,
              child: Row(
                children: [
                  Container(
                    width: MediaQuery.of(context).size.width * 0.5,
                    alignment: Alignment.center,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Material(
                          child: InkWell(
                            onTap: () {
                              ShareSheet.show(context,options: shareSheetWidget(100));
                            },
                            child: Row(
                              children: [
                                Container(
                                  child: Icon(
                                    Icons.share,
                                    color: Color.fromRGBO(136, 136, 136, 1),
                                    size: 15,
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(left: 5),
                                  child: Text(
                                    '分享',
                                    style: TextStyle(
                                        color: Color.fromRGBO(136, 136, 136, 1),
                                        fontSize: 12),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.symmetric(horizontal: 12),
                          width: 1,
                          height: 16,
                          color: Color.fromRGBO(221, 221, 221, 1),
                        ),
                        Container(
                          child: Icon(
                            Icons.new_releases,
                            color: Color.fromRGBO(136, 136, 136, 1),
                            size: 15,
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(left: 5),
                          child: Text(
                            '咨询',
                            style: TextStyle(fontSize: 12),
                          ),
                        )
                      ],
                    ),
                  ),
                  Material(
                    color: Color.fromRGBO(191, 55, 54, 1),
                    child: InkWell(
                      onTap: () {
                        Navigator.pushNamed(context, Routes.signUp);
                      },
                      child: Container(
                        width: MediaQuery.of(context).size.width * 0.5,
                        alignment: Alignment.center,
                        child: Text(
                          '立即报名',
                          style: TextStyle(fontSize: 15, color: Colors.white),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            )
          ],
        ));
  }
}
